import {html, TemplateResult} from 'lit';
import type {Meta, StoryObj} from '@storybook/web-components';
import "../../../echarts/bar/lit-polar-end-angle.ts"
import {LitPolarEndAngle} from "../../../echarts/bar/lit-polar-end-angle.ts";

const meta: Meta<LitPolarEndAngle> = {
    title: 'Echarts/LitPolarEndAngle',
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: 'tooltip以及其他各类事件暂时无法在storybook中使用，具体请参考echarts的文档',
            },
        }
    },
    render: (args: LitPolarEndAngle): TemplateResult => {
        return html`<lit-polar-end-angle 
            .chartId=${args.chartId}
            .width=${args.width}
            .height=${args.height}
            .title=${args.title}
            .tooltip=${args.tooltip}
            .angleAxisRange=${args.angleAxisRange}
            .angleAxisData=${args.angleAxisData}
            .seriesData=${args.seriesData}
        />`;
    },
    argTypes: {
        chartId: { control: 'text' },
        width: { control: 'text' },
        height: { control: 'text' },
        title: { control: 'object' },
        tooltip: { control: 'object' },
        angleAxisRange: { control: 'object' },
        angleAxisData: { control: 'object' },
        seriesData: { control: 'object' },
    },
};

export default meta;
type Story = StoryObj<LitPolarEndAngle>;

export const Default: Story = {
    args: {
        chartId: 'polar-end-angle-chart',
        width: '600px',
        height: '600px',
        title: {text: 'Polar Bar with End Angle'},
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'shadow'
            }
        },
        angleAxisRange: [[90, 0], [-90, -180]],
        angleAxisData: [['S1', 'S2', 'S3'], ['T1', 'T2', 'T3']],
        seriesData: [[1, 2, 3], [1, 2, 3]],
    },
};